<template>
	<view class="page-container">
		<!-- 未登录状态界面 -->
		<view v-if="!isLoggedIn" class="login-view">
			<div class="login-header">
				<text class="app-title">失物招领平台</text>
			</div>

			<div class="login-content">
				<div class="illustration">
					<uni-icons type="package" size="200" color="#409EFF"></uni-icons>
				</div>

				<div class="login-tip">
					<text class="tip-title">欢迎访问</text>
					<text class="tip-desc">登录后可发布失物信息、查看浏览记录</text>
				</div>

				<div class="login-buttons">
					<button class="main-btn" @click="goToLogin">
						<text>立即登录</text>
					</button>
					<button class="secondary-btn" @click="enterGuestMode">
						<text>游客浏览</text>
					</button>
				</div>
			</div>

			<div class="login-footer">
				<text class="footer-text">游客模式仅支持浏览功能</text>
			</div>
		</view>

		<!-- 已登录状态界面 -->
		<view v-else class="profile-view">
			<!-- 个人信息卡片 -->
			<view class="profile-card">
				<div class="avatar-wrap" @click="navigateToAvatarEdit">
					<image v-if="userInfo.avatar" :src="userInfo.avatar" class="user-avatar" mode="aspectFill" />
					<view v-else class="default-avatar">
						<uni-icons type="person" size="80" color="white"></uni-icons>
					</view>
				</div>

				<div class="user-info">
					<text class="user-name">{{ userInfo.nickname || '未设置昵称' }}</text>
					<div class="user-meta">
						<text v-if="userInfo.academy" class="meta-item">{{ userInfo.academy || '未设置学院' }}</text>
						<text v-if="userInfo.phone" class="meta-item">{{ userInfo.phone }}</text>
					</div>
					<div v-if="userInfo.rating" class="user-rating">
						<template v-for="(item, index) in 5" :key="index">
							<uni-icons
								:type="index < userInfo.rating ? 'star-filled' : (index < userInfo.rating + 0.5 ? 'star-half' : 'star')"
								size="18" color="#FFD700"></uni-icons>
						</template>
						<text class="rating-score">{{ userInfo.rating }} ({{ userInfo.ratingCount || 0 }}评价)</text>
					</div>
				</div>
			</view>

			<!-- 功能菜单 -->
			<view class="function-menu">
				<view class="menu-item" @click="navigateToSet()">
					<uni-icons type="gear" size="32" color="#909399"></uni-icons>
					<text>设置</text>
				</view>
			</view>

			<!-- 浏览记录区域 -->
			<view class="record-section">
				<view class="section-header">
					<text class="section-title">最近浏览记录</text>
				</view>

				<!-- 分类选项卡 -->
				<view class="category-tabs">
					<view :class="['tab-item', browseCategory === 'lost' ? 'active' : '']"
						@click="switchCategory('lost')">
						失物
					</view>
					<view :class="['tab-item', browseCategory === 'found' ? 'active' : '']"
						@click="switchCategory('found')">
						寻物
					</view>
				</view>

				<!-- 空状态提示 -->
				<view v-if="getCurrentRecords().length === 0 && !isLoading" class="empty-record">
					<uni-icons type="search" size="80" color="#CCCCCC"></uni-icons>
					<text class="empty-text">暂无浏览记录</text>
					<text class="empty-tip">浏览失物后会在这里显示记录</text>
				</view>

				<!-- 记录列表 -->
				<view v-else class="record-list">
					<view v-for="(item, index) in getCurrentRecords()" :key="item.itemId" class="record-item"
						@click="handleRecordClick(item)">
						<image :src="item.images || '/static/default-image.png'" class="record-image"
							mode="aspectFill" />
						<div class="record-info">
							<div class="record-header">
								<text class="record-title">{{ item.title || '未命名物品' }}</text>
								<view :class="['status-dot', getStatusClass(item.status)]"></view>
							</div>
							<text class="record-time">{{ item.browseTime || formatTime(item.createTime) }}</text>
							<text class="record-desc" v-if="item.description && item.description !== ''">
								{{ item.description }}
							</text>
							<text class="record-desc empty-desc" v-else>暂无物品描述</text>
							<text
								:class="['record-status', getStatusClass(item.status)]">{{ getStatusText(item.status) }}</text>
						</div>
					</view>

					<!-- 加载状态提示 -->
					<view v-if="isLoading && hasMore" class="loading-more">
						<uni-icons type="loading" size="30" color="#909399"></uni-icons>
						<text>加载更多浏览记录...</text>
					</view>

					<!-- 没有更多数据提示 -->
					<view v-if="!hasMore && getCurrentRecords().length > 0" class="no-more-data">
						<text>已经没有更多浏览记录了</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted, onUnmounted, watch } from 'vue';
	import { onPullDownRefresh, onReachBottom, onShow } from '@dcloudio/uni-app';

	// 状态管理
	const isLoggedIn = ref(false);
	const userInfo = ref({
		nickname: '',
		avatar: '',
		academy: '',
		phone: '',
		rating: 0,
		ratingCount: 0
	});
	const browseCategory = ref('lost'); // lost:失物, found:寻物
	const lostRecordList = ref([] as DisplayRecord[]);
	const foundRecordList = ref([] as DisplayRecord[]);
	const isLoading = ref(false);
	const errorMsg = ref('');
	const page = ref(1);
	const pageSize = ref(10);
	const hasMore = ref(true);
	const userId = ref<string | null>(null);

	// 后端实体类对应的前端数据模型
	interface BrowsingHistory {
		bhId : number;           // 浏览记录id
		userId : string;         // 用户id
		itemId : number;         // 物品id
		itemType : string;       // 物品类型（found或lost）
		createTime : Date;       // 浏览时间
	}

	// 失物表结构
	interface LostItem {
		LostId : number;         // 失物ID
		UserId : string;         // 失主ID
		CategoryId : number;     // 物品类别ID
		Title : string;          // 标题
		Description : string;    // 物品描述
		LostTime : Date;         // 丢失时间
		LostLocation : string;   // 丢失地点
		ContactWay : string;     // 联系方式
		Status : number;         // 状态
		Images : Array<{         // 图片URL列表
			url : string;
			[key : string] : any;
		}>;
		CreateTime : Date;       // 创建时间
		updateTime : Date;       // 更新时间
	}

	// 招领表结构
	interface FoundItem {
		FoundId : number;        // 招领id
		UserId : string;         // 失主ID
		CategoryId : number;     // 物品类别ID
		Title : string;          // 标题
		Description : string;    // 物品描述
		FoundTime : Date;        // 捡到时间
		FoundLocation : string;  // 捡到地点
		ContactWay : string;     // 联系方式
		Status : number;         // 状态
		Images : Array<{         // 图片URL列表
			url : string;
			[key : string] : any;
		}>;
		CreateTime : Date;       // 创建时间
		UpdateTime : Date;       // 更新时间
	}

	// 用于展示的记录模型（扩展后端模型）
	interface DisplayRecord extends BrowsingHistory {
		title : string;          // 物品标题
		images : string;         // 物品第一张图片URL
		status : number;         // 物品状态
		browseTime : string;     // 格式化后的浏览时间
		id : number;             // 用于标识的id（使用itemId）
		description : string;    // 物品描述
	}

	// 获取本地存储中的userId
	const getLocalUserId = () => {
		try {
			return uni.getStorageSync('userId') || null;
		} catch (e) {
			console.error('获取userId失败', e);
			return null;
		}
	};

	// 状态映射配置
	const statusConfig = {
		1: { text: '已找回', class: 'found' },
		2: { text: '寻找中', class: 'pending' },
		3: { text: '已关闭', class: 'closed' },
		default: { text: '未知状态', class: 'default' }
	};

	// 格式化时间
	const formatTime = (dateString : Date | string) => {
		if (!dateString) return '未知时间';

		const date = new Date(dateString);
		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, '0');
		const day = String(date.getDate()).padStart(2, '0');
		const hour = String(date.getHours()).padStart(2, '0');
		const minute = String(date.getMinutes()).padStart(2, '0');

		const today = new Date();
		const isToday = (
			date.getFullYear() === today.getFullYear() &&
			date.getMonth() === today.getMonth() &&
			date.getDate() === today.getDate()
		);

		return isToday
			? `今天 ${hour}:${minute}`
			: `${year}-${month}-${day} ${hour}:${minute}`;
	};

	// 获取物品第一张图片URL
	const getFirstImageUrl = (images : Array<{ url : string }> | undefined) => {
		if (!images || images.length === 0) return '/static/default-image.png';
		return images[0].url || '/static/default-image.png';
	};

	// 获取浏览记录的函数
	const fetchBrowseRecords = async (isRefresh = false, category = 'lost') => {
		if (!userId.value) {
			if (category === 'lost') {
				lostRecordList.value = [];
			} else {
				foundRecordList.value = [];
			}
			hasMore.value = false;
			return;
		}

		try {
			isLoading.value = true;

			if (isRefresh) {
				page.value = 1;
				hasMore.value = true;
				// 清除旧数据
				if (category === 'lost') {
					lostRecordList.value = [];
				} else {
					foundRecordList.value = [];
				}
			}

			if (!isRefresh) {
				uni.showLoading({ title: '加载中...' });
			}

			// 调整接口URL
			let url = '';
			if (category === 'lost') {
				url = 'http://172.20.10.2:8080/api/browsingHistory/page/lost';
			} else {
				url = 'http://172.20.10.2:8080/api/browsingHistory/page/found';
			}

			const res = await uni.request({
				url,
				method: 'GET',
				data: {
					userId: userId.value,
					page: page.value,
					size: pageSize.value
				}
			});

			uni.hideLoading();

			if (res.statusCode === 200 && res.data.code === 200) {
				// 后端返回的浏览记录列表
				const historyRecords = (res.data.data?.list || []) as BrowsingHistory[];
				const total = res.data.data?.total || 0;

				// 获取物品详情
				const formattedRecords = await Promise.all(historyRecords.map(async (history : BrowsingHistory) => {
					const itemDetail = await fetchItemDetail(history.itemId, history.itemType);

					return {
						...history,
						id: history.itemId,
						browseTime: formatTime(history.createTime),
						title: itemDetail.title || '未命名物品',
						images: getFirstImageUrl(itemDetail.images),
						status: itemDetail.status || 2,
						description: itemDetail.description || ''
					} as DisplayRecord;
				}));

				if (isRefresh) {
					if (category === 'lost') {
						lostRecordList.value = formattedRecords;
					} else {
						foundRecordList.value = formattedRecords;
					}
				} else {
					if (category === 'lost') {
						lostRecordList.value = [...lostRecordList.value, ...formattedRecords];
					} else {
						foundRecordList.value = [...foundRecordList.value, ...formattedRecords];
					}
				}

				hasMore.value = (category === 'lost' ? lostRecordList.value : foundRecordList.value).length < total;

				if (isRefresh) {
					uni.stopPullDownRefresh();
				}
			} else {
				let errMsg = '获取浏览记录失败';
				if (res.data && res.data.message) {
					errMsg = res.data.message;
				} else if (res.statusCode !== 200) {
					errMsg = '网络请求失败，请稍后重试';
				}
				errorMsg.value = errMsg;
				uni.showToast({
					title: errMsg,
					icon: 'none'
				});

				if (isRefresh && page.value > 1) {
					page.value--;
				}
			}
		} catch (error : any) {
			console.error('获取浏览记录异常', error);

			if (error.errMsg) {
				uni.showToast({
					title: error.errMsg,
					icon: 'none'
				});
			} else {
				uni.showToast({
					title: '网络请求异常，请检查网络连接',
					icon: 'none'
				});
			}

			uni.hideLoading();

			if (isRefresh && page.value > 1) {
				page.value--;
			}
		} finally {
			isLoading.value = false;
		}
	};

	// 获取物品详情（根据物品类型调用不同接口）
	const fetchItemDetail = (itemId, itemType) => {
		return new Promise((resolve, reject) => {
			let url = '';
			if (itemType === 'lost') {
				url = `http://172.20.10.2:8080/api/LostItem/${itemId}`;
			} else {
				url = `http://172.20.10.2:8080/api/FoundItem/${itemId}`;
			}

			uni.request({
				url,
				method: 'GET',
				success: (res) => {
					try {
						const responseData = res.data;

						if (responseData.code === 200) {
							const itemData = responseData.data || {};

							// 格式化返回数据，与列表项结构一致
							const formattedData = {
								id: Number(itemData.id || itemData[itemType + 'Id']) || 0,
								title: itemData.title || itemData.Title || '未命名物品',
								description: itemData.description || itemData.Description || '暂无描述',
								status: itemData.status || itemData.Status || 0,
								images: (itemData.images || itemData.Images || []).map(img => ({
									url: img.url || img.Url || ''
								})),
							};

							resolve(formattedData);
						} else {
							console.error(`获取${itemType === 'lost' ? '失物' : '招领'}详情失败`, responseData);
							uni.showToast({
								title: responseData.message || '获取详情失败',
								icon: 'none'
							});
							reject(new Error(`获取详情失败: ${responseData.message}`));
						}
					} catch (error) {
						console.error('解析详情数据出错', error);
						uni.showToast({ title: '数据解析错误', icon: 'none' });
						reject(error);
					}
				},
				fail: (err) => {
					console.error(`获取${itemType === 'lost' ? '失物' : '招领'}请求失败`, err);
					uni.showToast({ title: '网络错误，请稍后再试', icon: 'none' });
					reject(err);
				}
			});
		});
	};
	
	// 获取当前分类的记录
	const getCurrentRecords = () => {
		return browseCategory.value === 'lost' ? lostRecordList.value : foundRecordList.value;
	};

	// 获取状态文本和样式
	const getStatusText = (status : number) => {
		return statusConfig[status]?.text || statusConfig.default.text;
	};

	const getStatusClass = (status : number) => {
		return statusConfig[status]?.class || statusConfig.default.class;
	};

	// 页面生命周期
	onMounted(() => {
		initPage();
		setupEventListeners();

		onPullDownRefresh(onRefresh);
		onReachBottom(onLoadMore);
	});

	onShow(() => {
		initPage();
		// 从本地存储获取上次浏览的分类
		const lastCategory = uni.getStorageSync('lastBrowseCategory') || 'lost';
		browseCategory.value = lastCategory;
		// 强制刷新当前分类记录
		fetchBrowseRecords(true, browseCategory.value);
	});

	// 页面初始化
	const initPage = () => {
		const localUserId = getLocalUserId();
		userId.value = localUserId;
		isLoggedIn.value = !!localUserId;

		if (isLoggedIn.value) {
			fetchUserInfo();
		} else {
			lostRecordList.value = [];
			foundRecordList.value = [];
			hasMore.value = false;
		}
	};

	// 获取用户信息
	const fetchUserInfo = async () => {
		if (!userId.value) return;

		try {
			const res = await uni.request({
				url: 'http://172.20.10.2:8080/api/user/get',
				method: 'GET',
				data: { userId: userId.value }
			});

			if (res.statusCode === 200 && res.data.code === 200) {
				const userData = res.data.data || {};
				userInfo.value = {
					nickname: userData.name || '未设置昵称',
					avatar: userData.avatar || '',
					academy: userData.academy || '未设置学院',
					phone: userData.phone || '未设置电话',
					rating: parseFloat(userData.rating) || 0,
					ratingCount: parseInt(userData.ratingCount) || 0
				};
			} else {
				console.error('获取用户信息失败', res.data);
				uni.showToast({
					title: '获取用户信息失败',
					icon: 'none'
				});
			}
		} catch (error : any) {
			console.error('获取用户信息异常', error);
			uni.showToast({
				title: '网络请求异常，请检查网络连接',
				icon: 'none'
			});
		}
	};

	// 事件监听设置
	const setupEventListeners = () => {
		uni.$on('loginSuccess', () => {
			userId.value = getLocalUserId();
			initPage();
		});

		uni.$on('logout', () => {
			userId.value = null;
			isLoggedIn.value = false;
			userInfo.value = {
				nickname: '',
				avatar: '',
				academy: '',
				phone: '',
				rating: 0,
				ratingCount: 0
			};
			lostRecordList.value = [];
			foundRecordList.value = [];
			hasMore.value = false;
		});
	};

	// 页面卸载时清理
	onUnmounted(() => {
		uni.$off('loginSuccess');
		uni.$off('logout');
		onPullDownRefresh(() => { });
		onReachBottom(() => { });
	});

	// 下拉刷新处理
	const onRefresh = () => {
		fetchBrowseRecords(true, browseCategory.value);
	};

	// 触底加载更多
	const onLoadMore = () => {
		if (isLoading.value || !hasMore.value) return;
		page.value++;
		fetchBrowseRecords(false, browseCategory.value);
	};

	// 其他功能函数
	const goToLogin = () => {
		uni.navigateTo({
			url: '/common/login'
		});
	};

	const enterGuestMode = () => {
		uni.showToast({
			title: '已进入游客模式，部分功能受限',
			icon: 'none'
		});
	};

	const navigateToSet = () => {
		uni.navigateTo({
			url: '/common/setting'
		});
	};

	const navigateToAvatarEdit = () => {
		uni.navigateTo({
			url: '/pages/mine/mineUpd'
		});
	};

	// 处理记录点击事件
	const handleRecordClick = (item : DisplayRecord) => {
		if (item.status !== 2) {
			// 状态不为2时弹出提示，不跳转详情页
			uni.showModal({
				title: '提示',
				content: `该物品已${getStatusText(item.status)}，无法查看详情`,
				showCancel: false
			});
			return;
		}

		const category = item.itemType;
		browseCategory.value = category;
		uni.setStorageSync('lastBrowseCategory', category);

		// 根据物品类型跳转到不同详情页
		if (category === 'lost') {
			uni.navigateTo({
				url: `/pages/item-detail/Lostdetail?id=${item.itemId}`
			});
		} else {
			uni.navigateTo({
				url: `/pages/item-detail/Founddetail?id=${item.itemId}`
			});
		}

		// 记录浏览行为
		recordBrowse(item.itemId, item.itemType);
		//添加次数
		recordView(item.itemId,item.itemType)
	};
	const recordBrowse=async(itemId:number,itemType:string)=>{
		// 3. 记录个人浏览历史
		let browsingData = {
			userId: userId,
			itemId: itemId,
			itemType: itemType
		}
		console.log(browsingData)
		uni.request({
			url: `http://172.20.10.2:8080/browsingHistory/add`,
			method: 'POST',
			data: browsingData,
			header: {
				'Content-Type': 'application/json',
			}
		})
	}
	// 记录浏览行为
	const recordView = async (itemId : number, itemType : string) => {
		if (!userId.value) return;

		try {
			uni.request({
				url: `http://172.20.10.2:8080/api/Views/add`,
				method: 'GET',
				data:{
					itemId:itemId,
					type:itemType,
				}
			});
		} catch (error : any) {
			console.error('记录浏览行为失败', error);
		}
	};

	// 切换分类
	const switchCategory = (category : string) => {
		if (browseCategory.value === category) return;

		browseCategory.value = category;
		uni.setStorageSync('lastBrowseCategory', category);
		// 强制刷新分类数据
		fetchBrowseRecords(true, category);
	};

	// 监听分类变化
	watch(browseCategory, (newCategory, oldCategory) => {
		if (newCategory !== oldCategory) {
			fetchBrowseRecords(true, newCategory);
		}
	});
</script>

<style>
	/* 全局样式 */
	page {
		height: 100%;
		background-color: #F5F7FA;
		font-size: 28rpx;
		color: #333;
	}

	.page-container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	/* 未登录状态样式 */
	.login-view {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 80rpx 40rpx;
		box-sizing: border-box;
		height: 100%;
		background: linear-gradient(135deg, #f5f7fa 0%, #e9f2fc 100%);
	}

	.login-header {
		width: 100%;
		text-align: center;
		margin-top: 40rpx;
	}

	.app-title {
		font-size: 48rpx;
		font-weight: 700;
		color: #303133;
	}

	.login-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
		width: 100%;
		max-width: 600rpx;
	}

	.illustration {
		width: 300rpx;
		height: 300rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 60rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #409EFF 0%, #66B1FF 100%);
		box-shadow: 0 20rpx 40rpx rgba(64, 158, 255, 0.2);
	}

	.login-tip {
		text-align: center;
		margin-bottom: 80rpx;
	}

	.tip-title {
		font-size: 44rpx;
		font-weight: 600;
		color: #303133;
		margin-bottom: 20rpx;
	}

	.tip-desc {
		font-size: 28rpx;
		color: #606266;
		line-height: 1.6;
	}

	.login-buttons {
		display: flex;
		flex-direction: column;
		width: 100%;
		gap: 30rpx;
	}

	.main-btn,
	.secondary-btn {
		height: 100rpx;
		border-radius: 50rpx;
		font-size: 36rpx;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 10rpx 25rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
	}

	.main-btn {
		background: linear-gradient(135deg, #409EFF 0%, #66B1FF 100%);
		color: white;
	}

	.main-btn:active {
		transform: translateY(8rpx);
		box-shadow: 0 5rpx 15rpx rgba(64, 158, 255, 0.2);
	}

	.secondary-btn {
		background-color: white;
		color: #606266;
		border: 2rpx solid #DCDFE6;
	}

	.secondary-btn:active {
		transform: translateY(8rpx);
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
	}

	.login-footer {
		padding: 30rpx 0;
		width: 100%;
		text-align: center;
	}

	.footer-text {
		font-size: 24rpx;
		color: #909399;
	}

	/* 已登录状态样式 */
	.profile-view {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #F5F7FA;
	}

	.profile-card {
		background: linear-gradient(135deg, #409EFF 0%, #66B1FF 100%);
		padding: 60rpx 40rpx;
		border-radius: 0 0 30rpx 30rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 15rpx 30rpx rgba(64, 158, 255, 0.15);
		margin-bottom: 30rpx;
		position: relative;
		z-index: 1;
	}

	.avatar-wrap {
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		overflow: hidden;
		border: 6rpx solid rgba(255, 255, 255, 0.3);
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.user-avatar {
		width: 100%;
		height: 100%;
	}

	.default-avatar {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(255, 255, 255, 0.2);
	}

	.user-info {
		margin-left: 30rpx;
		color: white;
	}

	.user-name {
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		text-shadow: 0 3rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.user-meta {
		display: flex;
		flex-direction: column;
		margin-bottom: 15rpx;
	}

	.meta-item {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.9);
		margin-bottom: 8rpx;
	}

	.user-rating {
		display: flex;
		align-items: center;
	}

	.rating-score {
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.9);
		margin-left: 10rpx;
	}

	/* 功能菜单样式 */
	.function-menu {
		display: flex;
		justify-content: center;
		background-color: white;
		padding: 40rpx 0;
		margin-bottom: 30rpx;
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
	}

	.menu-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 20%;
	}

	.menu-item uni-icons {
		margin-bottom: 15rpx;
	}

	.menu-item text {
		font-size: 28rpx;
		color: #606266;
	}

	/* 记录区域样式 */
	.record-section {
		flex: 1;
		padding: 0 40rpx;
		box-sizing: border-box;
		overflow-y: auto;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #303133;
	}

	/* 分类选项卡样式 */
	.category-tabs {
		display: flex;
		justify-content: space-around;
		background-color: white;
		padding: 20rpx 0;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
	}

	.tab-item {
		padding: 16rpx 40rpx;
		font-size: 28rpx;
		color: #606266;
		border-radius: 30rpx;
		transition: all 0.3s ease;
	}

	.tab-item.active {
		color: #409EFF;
		background-color: #ECF5FF;
		border: 2rpx solid #B3D8FF;
	}

	.empty-record {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 300rpx;
		color: #909399;
	}

	.empty-record uni-icons {
		margin-bottom: 20rpx;
	}

	.empty-text {
		font-size: 32rpx;
		margin-bottom: 10rpx;
	}

	.empty-tip {
		font-size: 26rpx;
		color: #C0C4CC;
	}

	/* 记录列表样式（核心优化部分） */
	.record-list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.record-item {
		display: flex;
		background-color: #f9fafb;
		/* 优化背景色 */
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);
		/* 优化阴影 */
		padding: 32rpx;
		border: 1rpx solid #f0f2f5;
		/* 添加边框 */
		transition: all 0.2s ease;
	}

	.record-item:active {
		transform: translateY(4rpx);
		box-shadow: 0 3rpx 8rpx rgba(0, 0, 0, 0.04);
	}

	.record-image {
		width: 180rpx;
		height: 180rpx;
		border-radius: 16rpx;
		margin-right: 32rpx;
		object-fit: cover;
	}

	.record-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.record-header {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.record-title {
		font-size: 34rpx;
		font-weight: 500;
		color: #303133;
		flex: 1;
		margin-right: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* 状态点样式（核心优化） */
	.status-dot {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
		border: 4rpx solid white;
		/* 添加白色边框 */
		margin-left: 16rpx;
		position: relative;
		z-index: 1;
		flex-shrink: 0;
	}

	.status-dot.found {
		background-color: #52c41a;
		/* 优化绿色 */
	}

	.status-dot.pending {
		background-color: #faad14;
		/* 优化橙色 */
	}

	.status-dot.closed {
		background-color: #86909c;
		/* 优化灰色（提高对比度） */
	}

	.status-dot.default {
		background-color: #bfcbd9;
		/* 优化默认色 */
	}

	.record-time {
		font-size: 26rpx;
		color: #909399;
		margin-bottom: 12rpx;
	}

	/* 物品描述样式 */
	.record-desc {
		font-size: 28rpx;
		color: #606266;
		margin-bottom: 16rpx;
		line-height: 1.6;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		/* 显示3行 */
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.empty-desc {
		color: #909399;
		font-size: 26rpx;
		font-style: italic;
		display: flex;
		align-items: center;
	}

	.empty-desc uni-icons {
		margin-right: 10rpx;
		color: #c0c4cc;
	}

	/* 状态文本样式（核心优化） */
	.record-status {
		font-size: 28rpx;
		font-weight: 500;
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
		display: inline-block;
		/* 强制设置颜色，根据状态配对应色 */
		color: white !important;
		background-color: #E6A23C;
		/* pending 状态示例色，可按状态动态改 */
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
		transform: translateY(-4rpx);
		/* 微调位置 */
	}

	/* 加载更多提示 */
	.loading-more {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
		color: #909399;
	}

	.loading-more uni-icons {
		margin-right: 10rpx;
	}

	.no-more-data {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
		color: #C0C4CC;
		font-size: 26rpx;
	}
</style>